<script lang="ts" setup name="stockRealSheetList">
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { useRouter, useRoute } from "vue-router";
import { Inventory } from "@/api/interface";
import { getStockRealSheetList, deleteStockRealSheet } from "@/api/modules/inventory";
import { CirclePlus } from "@element-plus/icons-vue";
import { ref, onBeforeUpdate } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { formatDate } from "@/utils/date-formatter";
import { getLastQuarterDays } from "@/utils/date";

const router = useRouter();
const route = useRoute();
const initParam = ref({ orderType: 1 });
const proTable = ref<ProTableInstance>();

const column: ColumnProps<Inventory.ResStockRealSheetList>[] = [
  {
    type: "index",
    label: "序号",
    width: 60,
    search: {
      el: "date-picker",
      label: "单据日期",
      key: "date",
      order: 1,
      defaultValue: [formatDate(-getLastQuarterDays(), "start", "yyyy-MM-dd"), formatDate(0, "end", "yyyy-MM-dd")],
      props: {
        type: "datetimerange",
        format: "YYYY-MM-DD",
        valueFormat: "YYYY-MM-DD"
      }
    }
  },
  {
    sortable: true,
    prop: "orderNo",
    label: "单据号",
    // search 配置是否可以通过上面搜索框搜索到数据
    search: {
      el: "input"
    }
  },
  {
    sortable: true,
    prop: "checkFlagName",
    label: "单据状态",
    isFilterEnum: false,
    width: 120,
    enum: [
      { label: "未审核", value: false },
      { label: "已审核", value: true }
    ],
    search: {
      el: "select",
      key: "checkFlag"
    }
  },
  {
    sortable: true,
    prop: "quantity",
    label: "数量",
    width: 100
  },
  {
    sortable: true,
    prop: "amount",
    label: "金额",
    width: 120
  },
  {
    sortable: true,
    prop: "sysUserName",
    label: "制单人",
    width: 130
  },
  {
    sortable: true,
    prop: "createTime",
    label: "制单时间"
  },
  {
    sortable: true,
    prop: "checkerName",
    label: "审核人",
    width: 120
  },
  {
    sortable: true,
    prop: "checkTime",
    label: "审核时间"
  },
  // {
  //      sortable: true, prop: "printStatusName",
  //   label: "打印状态",
  //   width: 100
  // },
  {
    prop: "operation",
    width: 100,
    label: "操作"
  }
];

const toCreate = (id: number) => {
  // 跳转详情页面
  if (id !== 0) {
    router.push({
      path: "/stock/stockRealSheetEdit",
      query: {
        id: id
      }
    });
  } else {
    router.push(`/stock/stockRealSheetEdit`);
  }
};

const toDelete = async (id: number) => {
  await ElMessageBox.confirm("确定该订单吗删除吗?", "温馨提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  });
  await deleteStockRealSheet({ id: id });
  ElMessage.success("删除成功");
  proTable.value?.getTableList();
};

// 判断数据更新发请求
onBeforeUpdate(() => {
  if (route.query.upList) {
    proTable.value?.getTableList(); // 调用表格发请求的方法
  }
});
</script>

<template>
  <div class="table-box">
    <ProTable
      :columns="column"
      ref="proTable"
      title="盘点单列表"
      :pagination="true"
      row-key="id"
      :indent="20"
      :request-api="getStockRealSheetList"
      :init-param="initParam"
      highlight-current-row
    >
      <template #tableHeader>
        <!-- <el-button v-auth="'add'" type="primary" :icon="CirclePlus" @click="toCreate(0)"> 新增 </el-button>  -->
        <el-button v-auth="'add'" type="primary" :icon="CirclePlus" @click="toCreate(0)"> 新增盘点单 </el-button>
      </template>
      <template #operation="scope">
        <el-button v-auth="'edit'" v-if="!scope.row.checkFlag" type="primary" link @click="toCreate(scope.row.orderId)">
          编辑
        </el-button>
        <el-button v-if="scope.row.checkFlag" type="primary" link @click="toCreate(scope.row.orderId)"> 查看 </el-button>
        <el-button v-auth="'delete'" v-if="!scope.row.checkFlag" type="primary" link @click="toDelete(scope.row.orderId)">
          删除
        </el-button>
      </template>
    </ProTable>
  </div>
</template>

<style lang="scss" scoped></style>
